<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色选择器</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div id="test1"></div>

    <script>
        layui.use(["colorpicker"], function () {
            var colorpicker = layui.colorpicker;
            // 渲染
            colorpicker.render({
                // 绑定元素
                elem: "#test1",
                // 开启预定义颜色
                predefine: true,
                colors: ['#F00', '#0F0', '#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
                // 颜色被改变时触发回调
                change: function (color) {
                    // alert(color)
                    console.log(color);
                },
                // 颜色选择后的回调（确认和清除按钮）
                done: function (color) {
                    alert(color);
                }
            })
        });
    </script>
</body>
</html>